<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
</head>
<link rel="stylesheet" href="../src/css/public.css">
<link rel="stylesheet" href="../src/css/list.css">
<style>
    .header-box .nav .biaomian {
        left: 300px;
    }
</style>

<body>
    <header>
        <div class="center header-top">
            <span>一年逛两次 <img src="../static/img/logo.png" alt=""> 每次都有新选择！</span>
            <ul>
                <li class="vip">尊敬的&nbsp;<a href="./mine.html" class="vip-name" title="个人主页"> </a>&nbsp;:&nbsp;您好
                </li>
                <li class="vip-login"><a href="./login.html" title="登录">登录</a></li>
                <li class="vip-register"><a href="./register.html" title="注册账号">注册</a></li>
                <li><a href="../index.html" title="主页">主页</a></li>
                <li class="call"><a href="./call.html" title="call me">联系我们</a></li>
            </ul>
        </div>
    </header>
    <div class="header-box">
        <div class="logo-big">
            <a href="../index.html" class="big-one"><img src="../static/img/logo (5).png" alt=""
                    title="super clothes"></a>
            <a href="../index.html" class="big-two"><img src="../static/img/logo (4).png" alt=""
                    title="super clothes"></a>
        </div>
        <ul class="nav">
            <li><a href="../index.html">主页</a></li>
            <li><a href="./list.html">所有商品</a></li>
            <li><a href="./yifu.html">潮流上装</a></li>
            <li><a href="./ku.html">时尚裤袜</a></li>
            <li><a href="./suit.html">气质套装</a></li>
            <li><a href="./call.html">加入我们</a></li>
            <span class="biaomian"></span>
        </ul>
        <div class="car iconfont">
            我的购物车
            <span class="car-wu"></span>
            <span class="car-tu">&#xe614;</span>
        </div>
    </div>
    <div class="banner">
        <img src="../static/img/banner.jpg" alt="">
    </div>
    <div class="list">
        <div class="list-left">
            <div class="left-cloth">
                <h3>热卖产品</h3>
                <div class="list-list">
                    <a href=""><img src="../static/img/q1.jpg" alt="" title="潮流男士套装"></a>
                    <p><a href="">潮流男士套装</a></p>
                    <span>￥:1999.00</span>
                </div>
                <div class="list-list">
                    <a href=""><img src="../static/img/q2.jpg" alt="" title="男士海滩裤海滩短裤时尚短裤"></a>
                    <p><a href="">男士海滩裤海滩短裤时尚短裤</a></p>
                    <span>￥:129.00</span>
                </div>
                <div class="list-list list-list3">
                    <a href=""><img src="../static/img/q3.jpg" alt="" title="男士西装高档品味身份的象征"></a>
                    <p><a href="">男士西装高档品味身份的象征</a></p>
                    <span>￥:1098.00</span>
                </div>
            </div>

            <div class="left-cloth">
                <h3>热卖产品</h3>
                <div class="list-list">
                    <a href=""><img src="../static/img/q1.jpg" alt="" title="潮流男士套装"></a>
                    <p><a href="">潮流男士套装</a></p>
                    <span>￥:1999.00</span>
                </div>
                <div class="list-list">
                    <a href=""><img src="../static/img/q2.jpg" alt="" title="男士海滩裤海滩短裤时尚短裤"></a>
                    <p><a href="">男士海滩裤海滩短裤时尚短裤</a></p>
                    <span>￥:129.00</span>
                </div>
                <div class="list-list list-list3">
                    <a href=""><img src="../static/img/q3.jpg" alt="" title="男士西装高档品味身份的象征"></a>
                    <p><a href="">男士西装高档品味身份的象征</a></p>
                    <span>￥:1098.00</span>
                </div>
            </div>
            <div class="left-cloth">
                <h3>热卖产品</h3>
                <div class="list-list">
                    <a href=""><img src="../static/img/q1.jpg" alt="" title="潮流男士套装"></a>
                    <p><a href="">潮流男士套装</a></p>
                    <span>￥:1999.00</span>
                </div>
                <div class="list-list">
                    <a href=""><img src="../static/img/q2.jpg" alt="" title="男士海滩裤海滩短裤时尚短裤"></a>
                    <p><a href="">男士海滩裤海滩短裤时尚短裤</a></p>
                    <span>￥:129.00</span>
                </div>
                <div class="list-list list-list3">
                    <a href=""><img src="../static/img/q3.jpg" alt="" title="男士西装高档品味身份的象征"></a>
                    <p><a href="">男士西装高档品味身份的象征</a></p>
                    <span>￥:1098.00</span>
                </div>
            </div>
        </div>
        <div class="list-right">


        </div>
    </div>
    <div class="pinpai">
        <img src="../static/img/canon.jpg" alt="" title="canon"><img src="../static/img/esprit.jpg" alt=""
            title="esprit"><img src="../static/img/gap.jpg" alt="" title="gap"><img src="../static/img/puma.jpg" alt=""
            title="puma"><img src="../static/img/zara.jpg" alt="" title="zara">
    </div>
    <footer>
        <p>北京超衣设计文化有限公司 京网文[2019]10010-8848号 京ICP备12008848号</p>
        <p>Copyright © Shifone 2019 - 2080 All rights reserved.</p>

    </footer>
    
    <div id="dog">
        <img src="../static/dog.jpg" alt="" title="返回顶部">
    </div>
</body>
<script src="../src/js/free.js"></script>
<script src="../dist/js/jquery.min.js"></script>
<script src="../src/js/public.js"></script>
<script type="text/javascript">
    $.ajax({
        url: '../api/list.php',
        data: {},
        dataType: 'json',
        success: function (res) {
            let str = '';
            $(".list-right").html();
            for (let i = 12; i < res.length; i++) {
                str += `<div class="cloth">
                <a href="./details.html?id=${res[i].id}"><img src="${res[i].images}" alt="" title="${res[i].name}"></a>
                <a id="a" href="./details.html?id=${res[i].id}">${res[i].name}</a>
                <span> ￥：<b>${res[i].price}</b> <button id="button"><a href="./details.html?id=${res[i].id}">查看详情</a></button></span>
                </div>`
            }
            $(".list-right").html(str);
            but(res);
        }
    })


    function but(data) {
        $("#button").click(function () {
            var cook = getCookie('name');
            if (cook == undefined) {
                location.href = './login.html';
            }
        })
    }
</script>

</html>